<template>
  <h1>隐藏显示指令</h1>

<!--  v-if="布尔值"  true元素显示，false元素消失
      false 表示该元素不会倍渲染到DOM中，直接跳过该元素-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>

  <hr>
  <p v-show="false">小红</p>
  <p v-show="true">小绿</p>

  <hr>
<!--  v-else 是找离自己最近的v-if取反-->
  <p v-if="isShow">太阳</p>
  <p v-else>月亮</p>




</template>
<script setup>
import {ref} from "vue";

const isShow=ref('true');

</script>


<style scoped>

</style>